<template>
  <el-main>
    <!-- 管理员统计 -->
    <el-row :gutter="20"
            type="flex"
            class="row-bg"
            justify="center"
            style="margin-bottom: 80px">
      <el-col :span="6">
        <div class="show-header">
          <div class="show-num">{{readerCount}}</div>
          <div class="bottom-text">读者总数</div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="show-header"
             style="background: rgb(255, 153, 0)">
          <div class="show-num">{{applyReaderCount}}</div>
          <div class="bottom-text">读者未审核总数</div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="show-header"
             style="background: rgb(45, 183, 245)">
          <div class="show-num">{{borrowApplyCount}}</div>
          <div class="bottom-text">借书未审核总数</div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="show-header"
             style="background: rgb(237, 64, 20)">
          <div class="show-num">{{borrowReturnCount}}</div>
          <div class="bottom-text">到期待还书总数</div>
        </div>
      </el-col>
    </el-row>
    <!-- 图书分类统计和热门图书排行榜 -->
    <div style="display: flex">
      <div id="main1"
           style="width: 450px; height: 300px; flex-grow: 1"></div>
      <div id="main2"
           style="width: 450px; height: 300px; flex-grow: 1"></div>
    </div>
    <!-- 公告列表前三展示 -->
    <el-card class="box-card"
             style="margin-top:30px;">
      <div slot="header"
           class="clearfix">
        <span style="color:#000000;font-weight:600;">公告列表</span>
      </div>
      <div v-for="o in topList"
           :key="o.noticeId"
           class="text item">
        <span style="margin-right:5px; font-weight:bold;">{{o.noticeTitle+":"}}</span><span>{{o.noticeContent}}</span>
        <el-divider></el-divider>
      </div>
    </el-card>
  </el-main>
</template>

<script>
import { getHotBookApi } from '@/api/book'
import { getTopListApi } from '@/api/notice'
import { categoryCountApi } from '@/api/category'
import { getUserType, getUserId } from '@/utils/auth'
import { getBorrowApplyCountApi, getBorrowReturnCountApi } from '@/api/borrow'
import { getReaderCountApi, getApplyReaderCountApi } from '@/api/reader'
export default {
  name: 'Dashboard',
  data() {
    return {
      readerCount: 0,
      applyReaderCount: 0,
      borrowApplyCount: 0,
      borrowReturnCount: 0,
      topList: [],
    }
  },
  mounted() {
    this.myecharts1()
    this.myecharts2()
    this.getReaderCount()
    this.getApplyReaderCount()
    this.getBorrowApplyCount()
    this.getBorrowReturnCount()
    this.getTopList()
  },
  methods: {
    async getTopList() {
      let res = await getTopListApi()
      if (res && res.code == 200) {
        console.log('首页公告列表')
        console.log(res)
        this.topList = res.data
      }
    },
    async getBorrowReturnCount() {
      let res = await getBorrowReturnCountApi({
        userType: getUserType(),
        userId: getUserId(),
      })
      //   console.log(res)
      if (res && res.code == 200) {
        this.borrowReturnCount = res.data
      }
    },
    async getBorrowApplyCount() {
      let res = await getBorrowApplyCountApi({
        userType: getUserType(),
        userId: getUserId(),
      })
      //   console.log(res)
      if (res && res.code == 200) {
        this.borrowApplyCount = res.data
      }
    },
    async getApplyReaderCount() {
      let res = await getApplyReaderCountApi()
      //   console.log(res)
      if (res && res.code == 200) {
        this.applyReaderCount = res.data
      }
    },
    async getReaderCount() {
      let res = await getReaderCountApi()
      //   console.log(res)
      if (res && res.code == 200) {
        this.readerCount = res.data
      }
    },
    async myecharts1() {
      var myChart = this.$echarts.init(document.getElementById('main1'))
      // 指定图表的配置项和数据
      var option = {
        title: {
          text: '图书分类统计',
        },
        tooltip: {},
        legend: {
          data: ['分类'],
        },
        xAxis: {
          data: [],
        },
        yAxis: {},
        series: [
          {
            name: '数量',
            type: 'bar',
            data: [],
          },
        ],
      }
      //动态获取数据
      let res = await categoryCountApi()
      if (res && res.code == 200) {
        console.log('图书分类统计')
        console.log(res)
        option.xAxis.data = res.data.names
        option.series[0].data = res.data.counts
      }
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
    },
    async myecharts2() {
      var myChart = this.$echarts.init(document.getElementById('main2'))
      // 指定图表的配置项和数据
      var option = {
        title: {
          text: '前五借书热榜',
          left: 'center',
        },
        // tooltip: {
        //   trigger: 'item',
        // },
        legend: {
          orient: 'vertical',
          left: 'left',
        },
        series: [
          {
            // name: "Access From",
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center',
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '40',
                fontWeight: 'bold',
              },
            },
            labelLine: {
              show: false,
            },
            data: [],
          },
        ],
      }
      //动态获取数据
      let res = await getHotBookApi()
      if (res && res.code == 200) {
        console.log('前五借书热榜')
        console.log(res)
        option.series[0].data = res.data
      }
      // 使用刚指定的配置项和数据显示图表
      myChart.setOption(option)
    },
  },
}
</script>

<style lang="scss" scoped>
.bottom-text {
  bottom: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0.1);
  height: 25px;
  line-height: 25px;
  text-align: center;
  position: absolute;
  font-weight: 600;
}
.show-header {
  background: #00c0ef;
  color: #fff;
  height: 80px;
  border-radius: 5px;
  position: relative;
}
.show-num {
  font-size: 38px;
  font-weight: 600;
  padding: 5px;
}
</style>
